<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1220">
  <meta name="format-detection" content="telephone=no, email=no" />
  <title>海豚Baas Block Explorer</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    /* 你的CSS样式可以保持不变 */
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
    /* ... 其他样式 */
  </style>
</head>

<body>
<div id="app">
  <header>
    <div class="header">
      <div class="header-left">
        <span>海豚Baas区块浏览器</span>
      </div>
      <div class="header-right">
        <div class="nav">
          <a href="./index.html">首页</a>
        </div>
      </div>
      <div class="header-middle">
        <p><img src="images/logo.png" /></p>
        <div class="header-search">
          <form action="./block.html" style="display: contents;">
            <input type="text" v-model="blockHash" placeholder="区块高度" class="search-input" />
            <button class="search-btn" type="submit"></button>
          </form>
        </div>
      </div>
    </div>
  </header>

  <section class="container">
    <div class="container-box">
      <div class="main-box">
        <div class="main-box-header bd-bottom">
          <div class="title">所属区块：<span>{{ blockIndex }}</span> ，可查看的交易：</div>
          <div class="more">
            <a href="javascript:void(0);" @click="changeBlock(-1)">前一个区块</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" @click="changeBlock(1)">后一个区块</a>
          </div>
        </div>
        <div v-if="transactionList.length > 0" class="jiaoyi">
          <div class="jiaoyi-item">
            <div>hash值</div>
            <div>jsoncreatetime</div>
            <div>type</div>
          </div>
          <div class="jiaoyi-item" v-for="transaction in transactionList" :key="transaction.hashNo" @click="showTransactionDetails(transaction.hashNo)">
            <div>{{ transaction.hashNo }}</div>
            <div>{{ transaction.jsoncreatetime }}</div>
            <div>{{ transaction.type }}</div>
          </div>
        </div>
        <button class="gd" @click="loadMoreTransactions">加载更多 ∨</button>
      </div>

      <div class="main-box">
        <div class="main-box-header bd-bottom">
          <div class="title">交易详情：</div>
        </div>
        <div id="detail" v-html="transactionDetail"></div>
      </div>
    </div>
  </section>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      blockIndex: null,
      blockHash: '',
      transactionList: [],
      transactionDetail: '',
    },
    created() {
      this.loadBlockDetails();
    },
    methods: {
      loadBlockDetails() {
        const indexHash = this.$route.query.hash || this.blockHash;
        this.blockIndex = parseInt(indexHash);
        this.fetchBlockData(this.blockIndex);
      },
      fetchBlockData(blockIndex) {
        const apiUrl = `http://your-api-url/block/getBlockDetail?blockIndex=${blockIndex}`;
        fetch(apiUrl)
          .then(response => response.json())
          .then(data => {
            if (data.code === -1) {
              alert(data.msg);
            } else {
              this.transactionList = JSON.parse(data.o.dataJson);
            }
          });
      },
      showTransactionDetails(hashNo) {
        const transaction = this.transactionList.find(t => t.hashNo === hashNo);
        this.transactionDetail = this.formatTransactionDetails(transaction);
      },
      formatTransactionDetails(transaction) {
        let html = '<div class="assets-table">';
        for (let key in transaction) {
          html += `<div class="assets-item"><div>${key}</div><div>${transaction[key]}</div></div>`;
        }
        html += '</div>';
        return html;
      },
      changeBlock(direction) {
        this.blockIndex += direction;
        this.fetchBlockData(this.blockIndex);
      },
      loadMoreTransactions() {
        // 处理加载更多逻辑
      }
    },
    watch: {
      blockHash(newVal) {
        if (newVal) {
          this.loadBlockDetails();
        }
      }
    }
  });
</script>
</body>
</html>
